<!-- 社群营销 -->
<template>
  <div id="communityMarketIndex">
    <div class="main-bg">
      <!-- 顶部图片 -->
      <img class="top-img" :src="info.top_thumb||info.reward_top_thumb||defaultImg" alt="">

      <!-- 加群二维码模块 -->
      <div class="bg-fff bg-radius ewm-box" v-if="pageType == 'qr'||pageType == 'qrStore'">
        <div class="h2">{{info.guide_lang}}</div>

        <div class="store-info flex flex-a-c" v-if="info.is_store">
          <div class="flex-l" style="flex:1;">
            <div class="size-14 line-clamp-2" style="line-height: 1rem;font-weight: bold;">{{info.store_name||'---'}}</div>
            <div class="size-12 " style="color: #6E6E79;margin-top: 4px;" v-if="!this.$route.query.chg">距离最近</div>
          </div>
          <div class="flex-r t-c size-14" style="width:4rem;color: #F15353;text-align: right;" v-if="!info.is_alone" @click="toUrl('communityMarketSearch',{},{storeid: info.store_id})">更换</div>
        </div>

        <div class="ewm-img">
          <img :src="info.code_url || info.code_thumb" alt="">
          <div class="size-14 t-c" style="margin: 0.625rem;line-height: 1rem;">长按二维码，立即加群</div>
        </div>
      </div>

      <template v-if="pageType == 'award'">
        <!-- 优惠券 -->
        <div class="coupon-list flex">
          <div class="coupon-list-item coupon coupon-bg" v-for="item in info.coupons" :key="item.id">
            <!-- 优惠券样式 -->
            <div class="item-border flex-j-c" style="flex" >
              <div class="item-value flex-a-c flex-j-c">
                <template v-if="item.coupon_method == 1">
                  <em class="size-11">￥</em>
                  <div class="size-24" style="font-weight: bold;">{{Number(item.deduct) % 1 === 0 ?Number(item.deduct).toFixed(0):Number(item.deduct).toFixed(2)}}</div>
                </template>
                <template v-if="item.coupon_method == 2">
                  <div class="size-24" style="font-weight: bold;">{{Number(item.discount) % 1 === 0?Number(item.discount).toFixed(0):Number(item.discount).toFixed(2)}}</div>
                  <em class="size-11">折</em>
                </template>

              </div>
              <div class="item-contect">
                <div class="size-12 clamp-1" style="font-weight: bold;padding: 0.75rem 0px 0.25rem;">{{item.name}}</div>
                <div class="size-11" style="color: #6E6E79;">
                  <template v-if="item.coupon_method == 1">满{{ item.enough }}可用</template>
                  <template v-if="item.coupon_method == 2">满{{ item.enough }}立享</template>
                </div>
              </div>
            </div>
          </div>
          <div class="coupon-list-item coupon" v-for="(item,index) in info.reward" :key="index" v-show="Number(item.value)>0">
            <!-- 非优惠券样式 -->
            <div class="item-border flex-j-c" style="flex" >
              <div class="item-value flex-a-c flex-j-c">
                <div class="size-24" style="font-weight: bold;">{{item.value}}</div>
              </div>
              <div class="item-contect">
                <div class="size-12" style="font-weight: bold;line-height: 1.25rem;">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 领取按钮 -->
        <button class="btn-receive" @click="onReceive">立即领取</button>
        <!-- 提示语 -->
        <div class="size-11" style="line-height: 1.25rem;color:#6E6E79;">每个入群用户仅限领取1次</div>
        <!-- 领取规则 -->
        <div class="bg-fff bg-radius" style="margin: 1.125rem 0.75rem;" v-if="info.rule_status">
          <div class="h2">领取规则</div>
          <!-- 富文本 -->
          <div v-html="info.rule_content"></div>
        </div>
      </template>
    </div>

    <van-popup v-model="showReceivePop" style="background-color:transparent;">
      <div class="pop-box" >
        <div class="pop-main">
          <img :src="`https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/community-marketing/icon${awardData.status}.png`" alt="">
          <div class="h2 size-18" style="font-weight: bold;color: #00001C;padding: 0 1rem;">{{awardData.msg }}</div>
          <!-- <div class="h3 size-12" style="color: #6E6E79;margin-top: 4px;">{{awardData.msg}}</div> -->
          <button class="btn-receive" style="margin: 1rem 0 1.5rem;" @click="onReceiveAward">{{awardData.status == 1?'点击进群': info.button_word}}</button>
        </div>

        <i class="iconfont icon-adsystem_icon_cancle" @click="showReceivePop = false;"></i>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      defaultImg: '',
      showReceivePop: false,
      awardData: {},
      info: {},
      pageType: 'qr', //qrcode为加群页面，award为领取奖励页面
    };
  },

  activated() {
    let {mode,store_id,is_alone} = this.$route.query;
    if(mode) this.pageType = mode;
    if(store_id||mode == 'qrStore'){
      this.fun.getLocation().then((res)=> {
        let params = {
          lng: res.point.lng,
          lat: res.point.lat,
        };
        if(store_id) params.store_id = store_id;
        if(is_alone) params.is_alone = is_alone;
        this.getData(params);
      }).catch((err)=> {
        console.log(err);
      });
    } else {
      this.getData();
    }
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    async getData(_params = {}) {
      let _url = 'plugin.community-marketing.frontend.controllers.index.index';
      if(this.pageType == 'award') {
        _url = 'plugin.community-marketing.frontend.controllers.index.rewardPage';
        _params.store_id = this.$route.query.store_id;
      }
      _params.mode = this.pageType;
      let { result, msg, data } = await $http.get(_url,_params,".");
      if (result == 0) return this.$toast(msg);
      this.info = data;
      this.defaultImg = 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin%2Fcommunity-marketing%2Ftop-default.png';
    },
    toUrl(_name, _params = {}, _query = {}) {
      if (_name) this.$router.push(this.fun.getUrl(_name, _params, _query));
    },
    async onReceive(){
      let _params = {};
      if(this.$route.query.store_id) _params.store_id = this.$route.query.store_id;
      let { result, msg, data } = await $http.get('plugin.community-marketing.frontend.controllers.index.receiveNow',_params,".");
      if (result == 0) return this.$toast(msg);
      this.awardData = data;
      this.showReceivePop = true;
    },
    onReceiveAward(){
      if(this.awardData.status == 1) {
        return this.$router.replace(this.fun.getUrl("communityMarketIndex", {},{mode: 'qr',store_id : this.$route.query.store_id || 0, is_alone: 1 }));
      }
      if(!this.info.button_link_h5) return this.$router.replace(this.fun.getUrl("member", {},{}));
      window.location.href = this.info.button_link_h5;
    }
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.clamp-1{
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/* 超出部分显示省略号 */
  white-space: nowrap;/*规定段落中的文本不进行换行 */
}
#communityMarketIndex{
  .main-bg{
    background: #F5F5F5;
    min-height: 100vh;
    padding-bottom: 2rem;
    .bg-fff{
      background: #fff;
    }
    .bg-radius{
      border-radius: 0.5rem;
      overflow: hidden;
    }
    .size-14 {
      font-size: .875rem;
      line-height: .875rem;
    }
    .size-24 {
      font-size: 1.5rem;
      line-height: 1.5rem;
    }
    .size-12 {
      font-size: .75rem;
      line-height: .75rem;
    }
    .size-11 {
      font-size: 0.6875rem;
      line-height: .6875rem;
    }
    .t-c{
      text-align: center;
    }
    .top-img{
      width: 100%;
      display: block;
    }
    .ewm-box{
      margin: 0.75rem 1.75rem 0;
    }
    .h2{
      font-size: 1rem;
      color: #00001C;
      font-weight: bold;
      line-height: 3.375rem;
    }
    .store-info{
      border: 1px solid #E4E4E4;
      border-radius: 0.5rem;
      margin: 0 0.975rem 1.25rem;
      padding: 0.875rem;
      text-align: left;
      box-shadow: 0px 3px 6px 1px rgba(220,220,220,0.31);
    }
    .ewm-img{
      margin-bottom: 2.25rem;
      img{
        width: 9.375rem;
        height: 9.375rem;
        display: block;
      }
    }
    .coupon-list{
      flex-wrap: wrap;
      color: var(--themeBaseColor);
      .coupon-list-item{
        width: 6.75rem;
        height: 5rem;
        margin: 0.875rem 0 0 0.875rem;
        // background: #fff;
        border-radius: 10px;
        padding: 3px;
        background-size: 100%;
        background-color: none;
        background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin%2Fcommunity-marketing%2Fcoupon-bg1.png');
        .item-value{
          align-items: baseline;
        }
      }
      .item-border{
        flex-direction: column;
        height: 100%;
        width: 100%;
        // border: 1px solid var(--themeBaseColor);
        border-radius: 8px;
      }
      .coupon-bg {
        // background-size: 100%;
        // background-color: none;
        background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin%2Fcommunity-marketing%2Fcoupon-bg.png');
        // .item-border{
        //   border: none;
        // }
      }
    }
  }
}
.btn-receive{
  width: 65%;
  line-height: 2.5rem;
  border-radius: 2.5rem;
  text-align: center;
  color: #fff;
  background: var(--themeBaseColor);
  border: none;
  margin-top: 1.5rem;
}
.size-18 {
  font-size: 1.125rem;
}
.pop-box{
  .pop-main{
    width: 15.625rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #FFEFEF 0%, #FFFFFF 100%);
    margin: 3.5rem 0 1rem;
    img{
      width: 8.625rem;
      margin-top: -3.5rem;
    }
  }
  .icon-adsystem_icon_cancle{
    font-size: 32px;
    color: #fff;
  }
}
</style>